<!--
 * @FilePath: /lieshou-app/components/z-sub-tab.vue
-->

<template>
	<view class="z-sub-tab" :style="{ marginTop: marginTop + 'rpx' }">
		<uv-row justify="space-between" gutter="0">
			<uv-col span="4" v-for="(item, index) in mainTab" :key="index">
				<view class="grad-list">
					<image class="icon" :src="item.status ? item.asrc : item.src"></image>
					<view class="write">
						<view :class="{ 'grid-text1': true, 'active': item.status }">
							{{ item.name }}
						</view>
						<view :class="{ 'grid-text2': true, 'active': item.status }">
							{{ item.status ? `(第666位点亮)` : item.name }}
						</view>
					</view>
				</view>
			</uv-col>
		</uv-row>
	</view>
</template>

<script>

const mainTab = [{
	name: '全部课程学完',
	desc: '(完成后点亮)',
	status: false,
	src: '/static/image/my/class-icon.png',
	asrc: '/static/image/my/active-class-icon.png'
}, {
	name: '全部作业交完',
	desc: '(完成后点亮)',
	status: true,
	src: '/static/image/my/work-icon.png',
	asrc: '/static/image/my/active-work-icon.png'
}, {
	name: '全部奖励解锁',
	desc: '(完成后点亮)',
	status: false,
	src: '/static/image/my/award-icon.png',
	asrc: '/static/image/my/active-award-icon.png'
}]
export default {
	props: ['active', 'marginTop'],
	name: "z-nav",
	data() {
		return {
			mainTab
		};
	},
	methods: {}
}
</script>

<style lang="scss" scoped>
.z-sub-tab {
	width: 694rpx;
	height: 100rpx;
	margin: 0 auto;
	border-radius: 14rpx;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.3);
	border: 2rpx solid rgba(255, 255, 255, 1);

	.grad-list {
		display: flex;
		text-align: center;
		align-items: center;
		height: 100rpx;
		justify-content: center;

		.icon {
			width: 64rpx;
			object-fit: cover;
			height: 66rpx;
			margin-right: 8rpx;
		}

		.write {
			.grid-text1 {
				font-size: 20rpx;
				font-weight: 700;
				line-height: 28rpx;
				color: rgba(207, 207, 207, 1);

				&.active {
					color: rgba(0, 0, 0, 1);
				}
			}

			.grid-text2 {
				font-size: 16rpx;
				font-weight: 700;
				line-height: 22rpx;
				color: rgba(207, 207, 207, 1);

				&.active {
					font-size: 14rpx;
					color: rgba(0, 0, 0, 1);
				}
			}
		}
	}
}
</style>